/* alfresco/dashlets/Dashlet CSS */
.alfresco-dashlets-Dashlet {
   background: @dashlet-background;
   border: @dashlet-border;
   border-radius: @dashlet-border-radius;
   margin: 20px 0;
   padding: 0;
   position: relative;
   /* BEM-children */
   &__toolbar, &__title-bar-actions, &__toolbar2, &__body {
      display: none;
   }
   &__title {
      background: @dashlet-title-background;
      border-bottom: @dashlet-title-border-bottom;
      border-radius: @dashlet-title-border-radius;
      color: @dashlet-title-color;
      overflow-x: hidden;
      padding: 5px 9px 5px 9px;
   }
   &__resize-bar {
      background: transparent;
      bottom: 0;
      cursor: s-resize;
      cursor: ns-resize; /* Make sure this is after the s-resize value */
      height: 15px;
      left: 0;
      position: absolute;
      right: 0;
      &:hover {
         .alfresco-dashlets-Dashlet__resize-bar {
            &__icon-holder {
               background: #f6f6f6;
            }
            &__icon {
               &, &:after {
                  background: #ddd;
               }
            }
         }
      }
      &__icon-holder {
         background: #fff;
         border-radius: 3px 3px 0 0;
         box-sizing: border-box;
         height: 15px;
         margin: 0 auto;
         padding: 5px 10px;
         transition: background .2s ease-out;
         width: 45px;
      }
      &__icon {
         position: relative;
         &, &:after {
            background: #eee;
            border-radius: 1px;
            height: 2px;
            transition: background .2s ease-out;
            width: 25px;
         }
         &:after {
            content: "";
            position: absolute;
            top: 4px;
         }
      }
   }
   &__toolbar, &__toolbar2 {
      background: @dashlet-toolbar-background;
      border-bottom: @dashlet-toolbar-border-bottom;
      min-height: 28px;
      padding: 2px 9px 1px;
      .align-left {
         float: left;
      }
      .align-right {
         float: right;
      }
      .clear {
         clear: both;
      }
   }
   &__title-bar-actions {
      height: 16px;
      position: absolute;
      right: 4px;
      top: 1px;
      visibility: visible;
      .titleBarActionIcon {
         background-repeat: no-repeat;
         cursor: pointer;
         float: right;
         height: 16px;
         margin: 3px;
         width: 16px;
      }
      .edit {
         background-image: url(./images/edit.png);
      }
      .help {
         background-image: url(./images/help.png);
      }
      .search {
         background-image: url(./images/search.png);
      }
      .info {
         background-image: url(./images/info.png);
      }
      .rss {
         background-image: url(./images/feed.png);
      }
   }
   &__body {
      background: @dashlet-body-background;
      border-radius: @dashlet-body-border-radius;
      position: relative;
      a {
         cursor: pointer;
         color: @link-font-color;
         &:link, &:visited, &:active {
            text-decoration: @link-text-decoration;
         }
         &:hover {
            colour: @link-font-color-hover;
            text-decoration: @link-text-decoration-hover;
         }
      }
      h3 {
         font-weight: normal;
      }
      .empty {
         h3 {
            font-weight: bold;
            padding-bottom: .5em;
         }
         span {
            line-height: 1.5;
         }
      }
      &__widgets {
         box-sizing: border-box;
         height: 100%;
         overflow: auto;
      }
   }
   /* Same-level classes */
   &.smallpad {
      .alfresco-dashlets-Dashlet__body {
         padding: 4px;
      }
   }
   &.mediumpad {
      .alfresco-dashlets-Dashlet__body {
         padding: 10px;
      }
   }
   &.largepad {
      .alfresco-dashlets-Dashlet__body {
         padding: 16px;
      }
   }
   /* Child classes */
   .feed {
      background-image: url(./images/feed.png);
      background-repeat: no-repeat;
   }
   .scrollableList {
      height: 208px;
      overflow: auto;
      padding: 4px 0;
   }
   .scrollablePanel {
      height: 208px;
      margin-right: 1px;
      overflow: auto;
      div.resize-mask {
         display: none;
      }
   }
   .dashlet-padding {
      padding: 8px;
   }
   a.site-link {
      background-image: url(./images/site.png);
      background-repeat: no-repeat;
      padding-left: 18px;
   }
   .msg {
      padding-bottom: 8px;
      padding-top: 8px;
      p {
         margin-bottom: .3em;
      }
   }
   .text-list-item {
      padding-bottom: 6px;
   }
   .detail-list-item {
      clear: both;
      line-height: 1.4;
      padding: 7px 9px;
      &.last-item {
         border-bottom: none;
      }
      .icon, .avatar {
         float: left;
      }
      .avatar img {
         width: 48px;
      }
      .details {
         padding-left: 40px;
      }
      .person {
         padding-left: 54px;
      }
      .details2 {
         padding-left: 20px;
      }
      .user-status {
         background-position: 0 1px;
         background-repeat: no-repeat;
         padding-left: 20px;
      }
   }
   div.detail-list-item.first-item {
      float: none;
      padding-top: 0;
   }
   div.hdr {
      margin-bottom: 5px;
      padding-left: 8px;
      padding-top: 3px;
   }
   /* States */
   &--has-widgets {
      display: block;
   }
   &--no-resize {
      .alfresco-dashlets-Dashlet {
         &__body {
            padding-bottom: 0;
         }
         &__resize-bar {
            display: none;
         }
      }
   }
}
